<template>
  <div class="app-container">
    <div class="top-container">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="发送时间：">
          <el-date-picker
            v-model="formInline.startTime"
            type="date"
            size="medium"
            placeholder="开始日期"
            value-format="yyyy-MM-dd 00:00:00"
            format="yyyy-MM-dd"
            :picker-options="pickerOptionsStart"
            style="width: 150px"
          >
          </el-date-picker>
          <span style="margin: 5px;color: #DCDFE6;">—</span>
          <el-date-picker
            v-model="formInline.endTime"
            type="date"
            size="medium"
            placeholder="结束日期"
            value-format="yyyy-MM-dd 23:59:59"
            format="yyyy-MM-dd"
            :picker-options="pickerOptionsEnd"
            style="width: 150px"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="发送状态">
          <el-select v-model="formInline.status" size="medium" placeholder="请选择状态" clearable style="width: 150px">
            <el-option
              v-for="item in statusList"
              :key="item.status"
              :label="item.statusName"
              :value="item.status"
            />
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 10px">
          <el-button type="primary" size="medium" plain icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-container">
      <el-table
        v-loading="Loading"
        :data="tableData"
        border
        style="width: 99%">
        <el-table-column
          prop="createTime"
          label="发送时间"
          align="center"
          width="120px"
        >
        </el-table-column>
        <!-- <el-table-column
          prop="pieces"
          label="发送条数"
          align="center"
          min-width="45"
        >
        </el-table-column> -->
        <el-table-column
          prop="templateName"
          label="短信模板"
          align="center"
          min-width="80"
        >
        </el-table-column>
        <el-table-column
          prop="content"
          label="发送内容"
          align="center"
          min-width="120"
        >
        </el-table-column>
        <el-table-column
          prop="sender"
          label="发送人"
          align="center"
          min-width="60"
        >
        </el-table-column>
        <el-table-column
          prop="receiverPhone"
          label="收信人"
          align="center"
          min-width="80"
        >
        </el-table-column>
        <el-table-column
          prop="statusName"
          label="发送状态"
          align="center"
          min-width="49"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          min-width="50"
        >
          <template slot-scope="scope">
            <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button> -->
            <el-button
              v-if="scope.row.status === 0 || scope.row.status === 2"
              type="text"
              size="small"
              icon="el-icon-s-promotion"
              @click="sendSMS(scope.row)"
            >发送</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="formInline.page" :limit.sync="formInline.limit"
      @pagination="getList" />
    </div>
  </div>
</template>

<script>
import {
  smsPage, // 获取订单短信列表
  retry, // 短信列表重发
} from "@/api/pending";
import Pagination from "@/components/Pagination"; // 分页
import { getUrlKey } from '@/util/getUrlKey.js';
export default {
  components: {
    Pagination
  },
  data() {
    return {
      formInline: {
        orderId: '',
        startTime: '',
        endTime: '',
        status: '',
        page: 1,
        limit: 10,
        size: 10
      },
      tableData: [],
      statusList: [
        {
          status: 0,
          statusName: "发送失败"
        },
        {
          status: 1,
          statusName: "发送成功"
        },
        {
          status: 2,
          statusName: "未知"
        }
      ],
      total: 5,
      timeValue: [], // 查询时间值
      pickerOptionsStart:{
        disabledDate: time => {
          let endDateVal = this.formInline.endTime
          if (endDateVal) {
            return time.getTime() > new Date(endDateVal).getTime()
          }
        }
      },
      pickerOptionsEnd:{
        disabledDate: time => {
          let beginDateVal = this.formInline.startTime
          if (beginDateVal) {
            return (
              time.getTime() < new Date(beginDateVal).getTime() || time.getTime() > new Date(beginDateVal).getTime() + 30 * 24 * 60 * 60 * 1000
            )
          }
        }
      },
      Loading: true,
    }
  },
  mounted() {
    this.getList();
  },
  created() {
    this.keyupSubmit();
  },
  methods: {
    getList() {
      this.Loading = true;
      // console.log('this.formInline',this.formInline)
      this.formInline.orderId = getUrlKey('id');
      smsPage(this.formInline).then(res => {
        this.total = res.data.data.total
        this.tableData = res.data.data.rows
        setTimeout(() => {
          this.Loading = false;
        }, 0.5 * 1000);
      }).catch(error => {
        console.log(error)
      })
    },
    onSubmit() {
      this.formInline.page = 1;
      if(this.formInline.status === null) this.formInline.status = '';
      if(this.formInline.startTime === null && this.formInline.endTime === null) {
        this.formInline.startTime = '';
        this.formInline.endTime = '';
        this.getList();
      } else if((this.formInline.startTime !== '' && this.formInline.endTime == '') || (this.formInline.startTime !== '' && this.formInline.endTime === null)) {
        this.$message.warning("请选择结束时间");
      } else if(this.formInline.endTime == null && this.formInline.startTime == '') {
        this.$message.warning("请选择结束时间");
      } else if((this.formInline.endTime !== '' && this.formInline.startTime == '') || (this.formInline.endTime !== '' && this.formInline.startTime === null)) {
        this.$message.warning("请选择开始时间");
      } else if(this.formInline.endTime == null && this.formInline.startTime == '') {
        this.$message.warning("请选择开始时间");
      } else {
        this.getList();
      }
    },
    keyupSubmit(){
      document.onkeydown=e=>{
        let _key=window.event.keyCode;
        if(_key===13){
          this.onSubmit();
        }
      }
    },
    // 发送短信
    sendSMS(row) {
      var re = /^[0-9]+[0-9]*$/;
      if (!re.test(row.receiverPhone)) {
        this.$confirm('电话信息不完整，请核对后发送', '提示', {
          showCancelButton: false,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          center: true,
          type: 'warning'
        }).then(() => {
          this.$message.warning("电话信息不完整，请核对后发送");
        })
        return false;
      } else {
        let retryQuery = {
          id: row.id
        }
        retry(retryQuery).then(res => {
          if(res.data.code == 200) {
            this.$message.success("发送成功");
            this.getList();
          }
        }).catch(error => {
          console.log(error)
        })
      }
    }
  }
}
</script>

<style lang="scss">
.app-container {
  .top-container {
    padding: 20px 10px 10px 20px;
  }
  .table-container {
    padding-left: 10px;
    .el-table__row {
      td {
        border-right: 1px solid #dfe4ed !important;
      }
    }
  }
}
</style>